<template>
  <div id="app">
    <div class="main">
      <!-- 路由视图 -->
      <router-view
        @get-player-id="getPlayerId"
        @get-play-all-id="getPlayAllId"
        @getMvPlayerId="getMvPlayerId"
      ></router-view>

      <!-- 播放器组件 -->
      <!-- 传递歌单单曲id -->
      <!-- 传递歌单id -->
      <player
        v-show="playerId"
        :player-id="playerId"
        :list-id="listId"
        @set-player-id="setPlayerId"
      ></player>

      <mvplayer :mvplayerId="mvplayerId" v-show="mvplayerId"> </mvplayer>
    </div>
  </div>
</template>

<script>
import player from "./components/base/player.vue";
import mvplayer from "./components/base/mvplayer.vue";
export default {
  data() {
    return {
      playerId: null,
      listId: null,
      mvplayerId: null,
    };
  },
  methods: {
    // 获取子组件播放歌曲id
    getPlayerId(id) {
      //接收ranklist歌单详情排行榜所传歌单单曲id
      console.log("APP歌单单曲id", id);
      this.playerId = id;
    },
    getMvPlayerId(id) {
      //接收MVid
      this.mvplayerId = id;
    },
    getPlayAllId(id) {
      //接收ranklist歌单详情排行榜所传歌单id
      this.listId = id;
      console.log("APP歌单id", id);
    },
    setPlayerId(id) {
      this.playerId = id;
    },
  },
  components: {
    player,
    mvplayer,
  },
};
</script>

<style lang="less">
@import "./assets/css/base.css";
.main {
  height: 100%;
}
#app {
  background-color: #f2f3f4;
}
</style>